// 主页banner区域左侧导航栏
// 一.导航栏操作js
//         一.获取元素
        let nav0 = document.querySelectorAll("#banner .nav li");
        navLeft(nav0)
        // let menu = document.querySelectorAll(".banner #nav li .menu");
        // console.log(nav,menu);
        // 2.事件操作
        function navLeft(nav){
            for(let i=0;i<nav.length;i++){
                // 触碰显示
               nav[i].addEventListener("mouseenter",function(){
                   nav[i].classList.add("active")
                   console.log(i);       
               })
               //  触碰隐藏
               nav[i].addEventListener("mouseleave",function(){
                   nav[i].classList.remove("active")
                   console.log(i);       
               })  
            }
        }

// 二.轮播图区域
// 一.获取元素
let btns = document.querySelectorAll(".sliderbox .btns a")
let imgbox = document.querySelectorAll(".sliderbox .imgbox img")
let index = 0;//设置一个变量,控制小圆点索引,以此来使用定时器
let sliderbox = document.querySelector(".sliderbox")//获取大盒子
let arrowLeft = document.querySelector(".sliderbox .arrowLeft")//获取左箭头
let arrowRight = document.querySelector(".sliderbox .arrowRight")//获取右箭头
console.log(btns,imgbox,sliderbox,arrowLeft,arrowRight);

// 二.给元素添加事件
// 1.实现鼠标触碰btns就切换图片
for(let i=0;i<btns.length;i++){
    console.log(btns[i]);//获取小圆点
    btns[i].addEventListener("mouseenter",function(){
        play(i);//传入实参i
        index = i//统一i于index,使得鼠标触碰后 下一次定时器操作原点在我们移出原点的下一个
    })   
}

// 2.实现自动轮播效果,需要用到定时器
timerId = window.setInterval(function(){
    index++;
    if(index >btns.length-1){
        index = 0
    }
    play(index);//利用index来控制小圆点的索引,//传入实参index
},1000)

// 3.实现鼠标触碰大盒子,轮播暂停,鼠标移出轮播继续的效果---要获取大盒子的元素sliderbox
// one.鼠标触碰大盒子---暂停轮播-->清除定时器即可
sliderbox.addEventListener("mouseenter",function(){
    clearInterval(timerId);
})
// two.鼠标移出大盒子---启动轮播-->重新启动定时器就行
sliderbox.addEventListener("mouseleave",function(){
    timerId = window.setInterval(function(){
    index++;
    if(index >btns.length-1){
        index = 0
    }
    play(index);//利用index来控制小圆点的索引,//传入实参index
},1000)
})

// 4.实现左箭头,右箭头切换轮播图---要获取他们的元素
// one.左箭头
arrowLeft.addEventListener("click",function(){
    index--;
    if(index < 0){
        index = btns.length-1
    }
    play(index)//传入实参index
})
// tow.右箭头
arrowRight.addEventListener("click",function(){
    index++;
    if(index > btns.length-1){
        index = 0
    }
    play(index)//传入实参index
})


// ----------------------------------相同的代码或功能用函数封装-------------------------------------------
function play(i){
for(let j=0;j<btns.length;j++){
            btns[j].classList.remove("active")
            imgbox[j].classList.remove("curimg")
        }
        btns[i].classList.add("active")
        imgbox[i].classList.add("curimg")
}

// 三.选项卡---公共组件

// 二.对他们进行操作
// 1.先对导航nav进行操作,遍历找到每一个li
// 封装这个选项卡功能
function book(nav,main){
    for(let i=0;i<nav.length;i++){
        console.log(nav[i]);//已找到三个li
    nav[i].addEventListener("mouseenter",function(){
       for(let j=0;j<nav.length;j++){
        nav[j].className = "";
        main[j].className = "";
       }     
        nav[i].className = "active";
         main[i].className = "cur"
    })             
    } 
} 

// 图书电子书区域调用---选项卡功能
// 获取元素
let nav = document.querySelectorAll("#book .tab ul li")
let main = document.querySelectorAll("#book .tab .con div")
book(nav,main)

// 服装区调用---选项卡功能
let nav1 = document.querySelectorAll("#table .tab ul li")
let main1 = document.querySelectorAll("#table .tab .con div")
book(nav1,main1)